import { Breadcrumb, DocumentCard, DocumentCardDetails, DocumentCardPreview, DocumentCardType, FontIcon, IBreadcrumbItem, IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles, IStackProps, IStackStyles, IStyleFunctionOrObject, mergeStyles, Stack, useTheme } from "@fluentui/react";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router";
import Alymodel from "../../mysql_interface/model";
import { Iroot, InS } from "../interface";


type P = Iroot & InS

interface IMcoursecatebag extends Alymodel.IMcoursecatebag {
    disable: boolean,
    show: boolean
}


const styles: IStyleFunctionOrObject<IDocumentCardPreviewStyleProps, IDocumentCardPreviewStyles> = {
    root: {
        minWidth: 380,
        minHeight: '100%'
    }
}

const h1styles: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: {
        fontSize: '18px',
        color: '#434343',
        fontWeight: 'bold',
        marginBottom: 6
    }
}
const iconClass = mergeStyles({
    height: 24,
    width: 24,
    lineHeight: '24px',
    textAlign: 'center',
    transition: 'all 0.2s'
});


const spancss = mergeStyles({ color: '#1F1F1F', marginLeft: '24px', '&:hover': { color: 'var(--juse-1)' } })

const StackstylesItem1: IStyleFunctionOrObject<IStackProps, IStackStyles> = {
    root: {

    }
}
const Catebagview: React.FunctionComponent<P> = (prop) => {
    const params = useParams()
    const theme = useTheme()
    const Navigate = useNavigate()

    function mycoursecatebag(): IMcoursecatebag[] {
        const data = prop.getCoursecatebag.filter(v => {
            return v.catebagid === Number(params.ID)
        }).map(e => {
            const { cid } = e
            const course = prop.getCourse.find(v => v.ID === cid)
            const disable = prop.getuserUserCourse.find(v => v.course_ID === cid)
            return {
                ...e,
                course,
                disable: !!disable,
                show: false
            }
        }).sort((a, b) => Number(a.course?.ID) - Number(b.course?.ID)).sort((a, b) => Number(a.course?.paixu) - Number(b.course?.paixu));
        return data
    }

    function thiscatebag(): Alymodel.IMcatebag | void {
        return prop.getCatebag.find(e => e.ID === Number(params.ID))
    }
    const [catebag, setcatebag] = useState(thiscatebag())
    const [coursecatebag, setcoursecatebag] = useState(mycoursecatebag)
    const [items, setitems] = useState(getitems())
    function getitems() {
        const items: IBreadcrumbItem[] = [
            { text: '我的课程', key: '/secure/myclass', href: '#/secure/myclass' },

        ];
        if (catebag?.name) {
            items.push({ text: catebag?.name, key: 'f1', isCurrentItem: true })
        }
        return items
    }


    useEffect(() => {
        setcatebag(thiscatebag())
        setcoursecatebag(mycoursecatebag())
    }, [params.ID])

    useEffect(() => {
        setitems(getitems())
        setcatebag(thiscatebag())
        setcoursecatebag(mycoursecatebag())
    }, [prop])

    function click(v: number) {
        const c = JSON.parse(JSON.stringify(coursecatebag))
        const data = c[v]
        if (data) {
            data.show = !data.show
        }
        setcoursecatebag(c)
    }

    return (
        <div className="container-xxl" >
            <div className="row">
                <div className="col bt-2 bm-2" >
                    <Breadcrumb
                        theme={theme}
                        items={items}
                        ariaLabel="Breadcrumb with items rendered as buttons"
                        overflowAriaLabel="More links"
                    />
                </div>
            </div>
            <div className="row" >
                <div className="col" >
                    <DocumentCard
                        theme={theme}
                        type={DocumentCardType.compact}
                        style={{
                            height: '100%',
                            maxWidth: '100%',
                            boxShadow: theme.effects.elevation4,
                            overflow: 'hidden',
                            borderWidth: 0
                        }}
                    >
                        <DocumentCardPreview styles={styles} previewImages={[{ height: 200, imageFit: 2, width: 380, previewImageSrc: catebag?.banner ? catebag.banner : '' }]} />
                        <DocumentCardDetails className="p-3">
                            <Stack  >
                                <Stack styles={h1styles} >
                                    {catebag?.name}
                                </Stack >
                                <Stack style={{ height: 116, padding: '10px 0px' }} >
                                    <span className="fw-bold" >课程介绍 </span>
                                    <span>{catebag?.info}</span>
                                </Stack>
                                <Stack style={{ height: 18 }} >

                                </Stack>
                            </Stack>
                        </DocumentCardDetails>
                    </DocumentCard>
                </div>
            </div>
            <div className="row" >
                <div className="col" style={{ marginTop: '24px', marginBottom: '12px', fontSize: '18px' }}>
                    <span className="fw-bold" >课程内容</span>
                </div>
            </div>
            <div className="row" >
                <div className="col" >
                    {
                        coursecatebag.map((v, k) => {
                            return (
                                <Stack key={k} style={{ marginBottom: '12px', backgroundColor: '#ffffff', boxShadow: theme.effects.elevation4, borderRadius: 2 }} >
                                    <Stack  >
                                        <Stack horizontal disableShrink styles={StackstylesItem1} style={{ boxShadow: theme.effects.elevation4 }} >
                                            <Stack.Item className={"cu transition " + spancss} onClick={() => click(k)} grow disableShrink style={{ height: 72, lineHeight: '72px', alignItems: 'center', paddingLeft: 24, display: 'flex', zIndex: 2 }}>
                                                <span className={iconClass}>
                                                    <FontIcon aria-label="Forward" iconName="ChevronRightSmall" className={v.show ? "transition iconClass-x90" : 'transition'} />
                                                </span>

                                                <span className={"fw-normal "}  >{v.course?.name}</span>
                                            </Stack.Item>
                                            <Stack.Item onClick={() => v.disable ? Navigate('/course/' + v.cid + '?lession=0&catebag=' + params.ID) : ''} align="auto" className="cu juse-1-hover transition" styles={{ root: { width: 200, color: '#fff', backgroundColor: "var(--color-dark)", textAlign: 'center', alignContent: 'center', fontSize: '14px', lineHeight: '72px' } }} >
                                                <div >{v.disable ? '立即学习' : '暂未解锁'}</div>
                                            </Stack.Item>
                                        </Stack>
                                        <Stack style={{ height: v.show ? 72 : 0, overflow: 'hidden' }} className="transition" >
                                            <Stack style={{ padding: '18px 72px' }} className="text-truncate" >
                                                课程介绍： {v.course?.info}
                                            </Stack>

                                        </Stack>
                                    </Stack>
                                </Stack>
                            )
                        })
                    }

                </div>
            </div>
        </div >
    )
}

export default Catebagview